import { useSpMessage } from '@/useHook/useMessage/MessageProvide'

export default function Home() {
  const spMessage = useSpMessage()

  const onShowMsg = (type) => {
    spMessage[type](`This is a ${type} message`)
  }
  return (
    <>
      <p>
        在react中，通过Context Api 来注入消费spMessage实例 关于文档可点击查看
        <a
          href='https://www.npmjs.com/package/simple-message-toast'
          target='_blank'>
          npm simple-message-toast
        </a>
      </p>
      <div>
        <button onClick={() => onShowMsg('info')}>普通消息</button>
        <button onClick={() => onShowMsg('success')}>成功消息</button>
        <button onClick={() => onShowMsg('warn')}>警告消息</button>
        <button onClick={() => onShowMsg('error')}>错误消息</button>
      </div>
    </>
  )
}
